/* ================================================
   GREEN BURBBLE — Green Burbble.css
   Tema verde dark premium • estilo 100% bubble
   Base estrutural: Estilos.css (Seven Link)
   ================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
}

:root {
  /* ── Paleta verde ── */
  --gb-bg-1:      #04140b;
  --gb-bg-2:      #06210f;
  --gb-bg-3:      #0a2e16;
  --gb-dark:      #051a0e;
  --gb-border:    rgba(134,239,172,0.14);
  --gb-text:      #eafff2;
  --gb-muted:     rgba(200,255,220,0.45);
  --gb-accent:    #22c55e;
  --gb-accent2:   #16a34a;
  --gb-accent3:   #4ade80;
  --gb-accent4:   #86efac;
  --gb-lime:      #a3ff5e;
  --nb-panel-w:   400px;
  --gb-font-head: 'Baloo 2', sans-serif;
  --gb-font-bubble:'Bubblegum Sans', 'Baloo 2', cursive;
  --gb-font-body: 'Fredoka', sans-serif;
  --gb-ease:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* aliases pra manter compatibilidade com seletores antigos */
  --nb-dark:      var(--gb-dark);
  --nb-border:    var(--gb-border);
  --nb-text:      var(--gb-text);
  --nb-muted:     var(--gb-muted);
  --nb-accent:    var(--gb-accent);
  --nb-accent2:   var(--gb-accent2);
  --nb-font-head: var(--gb-font-head);
  --nb-font-body: var(--gb-font-body);
  --nb-ease:      var(--gb-ease);
}

body {
  background: #4eab78;
  color: var(--gb-text);
  font-size: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* ================================================
   FUNDO — bolhas flutuantes (troca as .circle)
   ================================================ */
.tech-circle { display: none; }

.circle {
  position: absolute;
  border-radius: 50%;
  border: none;
  background: #22c55e;
  opacity: 0.75;
  animation: floatBubble 11s infinite ease-in-out;
}

/* brilho de bolha — desligado */
.circle::after {
  display: none;
  content: "";
  position: absolute;
  top: 14%;
  left: 20%;
  width: 26%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  filter: blur(1px);
  opacity: 0.65;
}

.circle:nth-child(1) { width: 120px; height: 120px; top: 15%; left: 10%; }
.circle:nth-child(2) { width: 80px;  height: 80px;  top: 37%; left: 75%; animation-duration: 13s; }
.circle:nth-child(3) { width: 150px; height: 150px; top: 25%; left: 55%; animation-duration: 15s; }
.circle:nth-child(4) { width: 60px;  height: 60px;  top: 60%; left: 60%; animation-duration: 9s; }
.circle:nth-child(5) { width: 100px; height: 100px; top: 80%; left: 15%; animation-duration: 12s; }
.circle:nth-child(6) { width: 100px; height: 100px; top: 95%; left: 80%; animation-duration: 14s; }
.circle:nth-child(7) { width: 100px; height: 100px; top: 8%;  left: 92%; animation-duration: 10s; }

@keyframes floatBubble {
  0%, 100% { transform: translateY(0) scale(1);   opacity: 0.6; }
  50%      { transform: translateY(-26px) scale(1.12); opacity: 0.95; }
}

@media (max-width: 600px) {
  .circle:nth-child(2) { width: 60px; height: 60px; top: 100%; left: 100%; }
}

/* ================================================
   FOGUETE / METEORO
   ================================================ */
.rocket {
  position: fixed;
  width: 50px;
  cursor: pointer;
  bottom: -100px;
  left: 10%;
  animation: fly 10s linear infinite;
  z-index: 995;
}

.rocket::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 160px;
  background: #4ade80;
  border-radius: 50%;
  opacity: 0.95;
  animation: trail 8s linear infinite;
}

@keyframes fly {
  0%   { bottom: -100px; left: 10%; transform: rotate(0deg); }
  50%  { bottom: 50%;    left: 50%; transform: rotate(15deg); }
  100% { bottom: 110%;   left: 90%; transform: rotate(-10deg); }
}

@keyframes trail {
  0%   { height: 120px; opacity: 1; }
  100% { height: 250px; opacity: 0; }
}

@media (max-width: 600px) {
  .rocket { content: url("../imglink/meteoros.png"); z-index: 995; }
}

/* ================================================
   LOGO + GIF
   ================================================ */
.Logos {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: -110px;
  position: relative;
}

.Logos img {
  width: 340px;
  height: 340px;
  object-fit: contain;
}

.Atualiza {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: -50px;
}

.Atualiza img { width: 300px; height: auto; }

/* ================================================
   BOTÕES BUBBLE (mantém .button2)
   ================================================ */
.container-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: -26%;
}

.button2 {
  display: block;
  align-items: center;
  margin-bottom: -10px;
  margin-top: 8%;
  height: 50px;
  width: 255px;
  cursor: pointer;
  gap: 20px;
  transition: all 0.25s var(--gb-ease);
  position: relative;
  overflow: hidden;
  z-index: 999;
  color: #097e3e;
  padding: 0.7em 3.3em 0.7em 1.7em;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.3px;
  border-radius: 999px;
  background: #ffffff;
  border: none;
}

.button2 img {
  width: 22px;
  height: 22px;
  position: absolute;
  padding: 0px 10px;
  margin-top: -2px;
  /* ícone tingido de verde (#097e3e) */
  filter: brightness(0) saturate(100%) invert(39%) sepia(28%) saturate(1045%) hue-rotate(94deg) brightness(95%) contrast(112%);
}

.button2 > svg {
  height: 30px;
  position: absolute;
  padding: 0px 5px;
  margin-top: -4px;
}

.button2:active { transform: scale(0.97); }

/* sem efeitos de bolha atrás dos botões */
.button2:before,
.button2:after { display: none; }

.button2:hover {
  color: #097e3e;
  border: none;
  transform: translateY(-2px);
}

/* rótulos dos botões (mantidos) */
.button2.instagram .text::after { content: "Instagram"; }
.button2.instagram:hover .text::after { content: "Segue Aí !!"; }
.button2 .icon { transition: 0.3s; }
.button2:hover .icon { content: url("../imglink/instagram\ \(8\).png"); }

.button2.whatsapp .text::after { content: "Whatsapp"; }
.button2.whatsapp:hover .text::after { content: "Mandou Bem"; }
.button2.whatsapp .icon { transition: 0.3s; }
.button2.whatsapp { z-index: 994; animation: shake 5s infinite; }
.button2.whatsapp:hover .icon { content: url("../imglink/whatsapp\ \(11\).png"); }

@keyframes shake {
  0%  { transform: translateX(0) rotate(0); }
  2%  { transform: translateX(-10px) rotate(-3deg); }
  4%  { transform: translateX(10px)  rotate(3deg); }
  6%  { transform: translateX(-10px) rotate(-3deg); }
  8%  { transform: translateX(10px)  rotate(3deg); }
  10% { transform: translateX(-8px)  rotate(-2deg); }
  12% { transform: translateX(8px)   rotate(2deg); }
  14% { transform: translateX(-5px)  rotate(-1deg); }
  16% { transform: translateX(5px)   rotate(1deg); }
  18% { transform: translateX(0) rotate(0); }
  100%{ transform: translateX(0) rotate(0); }
}

.button2.site .text::after { content: "Ver Site"; }
.button2.site:hover .text::after { content: "Pronto?"; }
.button2.site .icon { transition: 0.3s; }
.button2.site:hover .icon { content: url("../imglink/click\ \(1\).png"); }

.button2.cardapio .icon { transition: 0.3s; }
.button2.cardapio .text::after { content: "Cardápio"; }
.button2.cardapio:hover .text::after { content: "Ver Cardápio"; }
.button2.cardapio:hover .icon { content: url("../imglink/menu\ \(10\).png"); }

.button2.github .text::after { content: "GitHub"; }
.button2.github:hover .text::after { content: "Vamos Lá!!"; }
.button2.github .icon { transition: 0.3s; }
.button2.github:hover .icon { content: url("../imglink/github\ \(1\).png"); }

.button2.google .text::after { content: "Avaliar"; }
.button2.google:hover .text::after { content: "Obrigado"; }
.button2.google .icon { transition: 0.3s; }
.button2.google:hover .icon { content: url("../imglink/star\ \(3\).png"); }

.button2.instagram { z-index: 996; }
.button2.site      { z-index: 996; }
.button2.cardapio  { z-index: 994; }

/* ================================================
   FOOTER + BADGE
   ================================================ */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 100px 0;
  color: var(--gb-text);
}

.copyright-badge {
  padding: 10px 20px;
  font-family: var(--gb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-text);
  border: 1px solid var(--gb-border);
  border-radius: 999px;
  transition: 0.3s ease;
}

.copyright-badge:hover {
  transform: scale(1.05);
}
.copyright-badge { display: none; }

/* ================================================
   NAVBAR — painel lateral bubble
   ================================================ */
.nb-header *, .nb-header *::before, .nb-header *::after,
.nb-panel  *, .nb-panel *::before,  .nb-panel *::after,
.nb-hamburger *, .nb-overlay * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.nb-hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 8000;
  width: 46px;
  height: 46px;
  background: #6cf57c;
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.nb-hamburger:hover {
  border-color: var(--gb-accent);
  background: #4ade80;
  transform: translateY(-1px);
}

.nb-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gb-accent4);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s var(--gb-ease), opacity 0.25s, width 0.25s;
}

.nb-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nb-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nb-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nb-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(2,12,7,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--gb-ease);
}

.nb-overlay.open { opacity: 1; pointer-events: all; }

.nb-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nb-panel-w);
  max-width: 100vw;
  height: 100dvh;
  z-index: 9000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 0 28px 28px 0;
  transform: translateX(-100%);
  transition: transform 0.4s var(--gb-ease);
}

.nb-panel.open { transform: translateX(0); }

.nb-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gb-bg-2);
}

.nb-panel-bg-img { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.nb-panel-bg-img img { width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0.9; }

.nb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 34px;
  height: 34px;
  background: rgba(134,239,172,0.08);
  border: 1px solid var(--gb-border);
  border-radius: 50%;
  color: var(--gb-muted);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.nb-close:hover { background: var(--gb-accent2); color: #fff; border-color: transparent; transform: rotate(90deg); }

.nb-logo-wrap {
  position: relative;
  z-index: 2;
  padding: 36px 28px 20px;
  border-bottom: 1px solid var(--gb-border);
  width: 60%;
}

.nb-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nb-logo-img { height: 88px; width: auto; object-fit: contain; }

.nb-search { position: relative; z-index: 2; padding: 18px 28px; width: 60%; }

.nb-search-icon {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gb-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.nb-search-input {
  width: 100%;
  height: 42px;
  background: rgba(134,239,172,0.07);
  border: 1px solid var(--gb-border);
  border-radius: 999px;
  padding: 0 16px 0 38px;
  color: var(--gb-text);
  font-family: var(--gb-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
}

.nb-search-input::placeholder { color: var(--gb-muted); }
.nb-search-input:focus { border-color: rgba(34,197,94,0.55); background: rgba(134,239,172,0.12); }

.nb-search-results {
  position: absolute;
  top: calc(100% - 4px);
  left: 28px;
  right: 28px;
  background: var(--gb-bg-3);
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  overflow: hidden;
  display: none;
  z-index: 999;
}

.nb-search-results.open { display: block; }

.nb-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--gb-text);
  font-size: 14px;
  font-family: var(--gb-font-body);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--gb-border);
  transition: background 0.18s;
}

.nb-result-item:last-child { border-bottom: none; }
.nb-result-item:hover, .nb-result-item.focused { background: rgba(34,197,94,0.12); }

.nb-result-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; }
.nb-result-icon img { width: 18px; height: 18px; object-fit: contain; }
.nb-result-label strong { color: var(--gb-accent); font-weight: 600; }

.nb-no-results { padding: 14px 16px; color: var(--gb-muted); font-size: 13px; font-family: var(--gb-font-body); text-align: center; }

.nb-nav { position: relative; z-index: 2; flex: 1; overflow-y: auto; padding: 8px 0 32px; width: 60%; scrollbar-width: none; }
.nb-nav::-webkit-scrollbar { display: none; }

.nb-links { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }

.nb-item { opacity: 0; transform: translateX(-16px); transition: opacity 0.3s ease, transform 0.3s ease; }
.nb-panel.open .nb-item:nth-child(1) { opacity:1; transform:none; transition-delay:.08s; }
.nb-panel.open .nb-item:nth-child(2) { opacity:1; transform:none; transition-delay:.12s; }
.nb-panel.open .nb-item:nth-child(3) { opacity:1; transform:none; transition-delay:.16s; }
.nb-panel.open .nb-item:nth-child(4) { opacity:1; transform:none; transition-delay:.20s; }
.nb-panel.open .nb-item:nth-child(5) { opacity:1; transform:none; transition-delay:.24s; }
.nb-panel.open .nb-item:nth-child(6) { opacity:1; transform:none; transition-delay:.28s; }
.nb-panel.open .nb-item:nth-child(7) { opacity:1; transform:none; transition-delay:.32s; }
.nb-panel.open .nb-item:nth-child(8) { opacity:1; transform:none; transition-delay:.36s; }

.nb-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--gb-text);
  font-family: 'Chango', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s, gap 0.2s;
  position: relative;
}

.nb-link::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 20%;
  height: 60%;
  width: 0;
  background: var(--gb-accent);
  border-radius: 999px;
  transition: width 0.25s var(--gb-ease);
}

.nb-link:hover { background: rgba(34,197,94,0.10); color: var(--gb-accent4); gap: 16px; }
.nb-link:hover::before { width: 4px; }

.nb-link-icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s; }
.nb-link:hover .nb-link-icon { opacity: 1; }
.nb-link-icon img { width: 22px; height: 22px; object-fit: contain; }

@media (max-width: 480px) {
  :root { --nb-panel-w: 70vw; }
  .nb-panel { border-radius: 0; }
  .nb-logo-wrap, .nb-search, .nb-nav { width: 70%; }
  .nb-panel-bg {
    background: var(--gb-bg-2);
  }
}

@media (max-width: 350px) {
  .nb-logo-wrap { padding: 28px 18px 16px; }
  .nb-search    { padding: 14px 18px; }
  .nb-links     { padding: 0 10px; }
  .nb-link      { font-size: 14px; padding: 10px 12px; }
}

/* ================================================
   BOTÕES FLUTUANTES (share / promo / google)
   ================================================ */
.share-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(134,239,172,0.25);
  background: #6cf57c;
  color: var(--gb-accent4);
  cursor: pointer;
  transition: 0.3s ease;
}

.share-btn:hover { transform: scale(1.08); }
.share-btn svg { width: 20px; height: 20px; }

body.nb-open .share-btn { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* ================================================
   SLIDER
   ================================================ */
.slider {
  position: relative;
  width: min(739px, 100%);
  margin: 40px auto 0;
  overflow: hidden;
  border-radius: 28px;
  z-index: 999;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  border: 2px solid rgba(134,239,172,0.18);
}

.slider.grabbing { cursor: grabbing; }
.slider-track { display: flex; will-change: transform; }
.slide { flex: 0 0 100%; aspect-ratio: 2 / 1; background: rgba(134,239,172,0.05); }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; z-index: 999; position: relative; }
.slider-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(134,239,172,0.3); cursor: pointer; transition: 0.3s ease; }
.slider-dots button.active { width: 24px; border-radius: 999px; background: var(--gb-accent3); }

/* ================================================
   BOLHA DE COMPARTILHAMENTO
   ================================================ */
.share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(2,12,7,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.share-backdrop.show { opacity: 1; pointer-events: all; }

.share-bubble {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10600;
  width: 100%;
  max-width: 100%;
  padding: 20px clamp(14px, 4vw, 40px) max(22px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #0a3d18;
  overflow: visible;
  transform-origin: 50% 100%;
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
}

.share-bubble.show { transform: translateY(0); opacity: 1; pointer-events: all; }

.share-head { display: flex; align-items: center; justify-content: space-between; margin: 0 auto 16px; max-width: 900px; padding: 0 4px; }
.share-head-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gb-font-head); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.share-title-svg { width: 17px; height: 17px; color: #ffffff; }

.share-close {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: 1px solid var(--gb-border);
  background: rgba(134,239,172,0.06);
  color: rgba(234,255,242,0.7);
  font-size: 18px;
  cursor: pointer;
  transition: 0.25s ease;
}
.share-close:hover { background: rgba(34,197,94,0.2); color: #fff; }

.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  max-width: 900px;
  margin: 0 auto;
  gap: 12px;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: none;
  color: rgba(234,255,242,0.82);
  font-family: var(--gb-font-body);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-14px) scale(0.9);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.share-bubble.show .share-item { opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.45s var(--gb-ease); }
.share-bubble.show .share-item:nth-child(1) { transition-delay: .10s; }
.share-bubble.show .share-item:nth-child(2) { transition-delay: .14s; }
.share-bubble.show .share-item:nth-child(3) { transition-delay: .18s; }
.share-bubble.show .share-item:nth-child(4) { transition-delay: .22s; }
.share-bubble.show .share-item:nth-child(5) { transition-delay: .26s; }
.share-bubble.show .share-item:nth-child(6) { transition-delay: .30s; }
.share-bubble.show .share-item:nth-child(7) { transition-delay: .34s; }
.share-bubble.show .share-item:nth-child(8) { transition-delay: .38s; }
.share-bubble.show .share-item:nth-child(9) { transition-delay: .42s; }

.share-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: var(--c, #fff);
  transition: transform 0.3s var(--gb-ease), filter 0.3s ease;
}
.share-ico svg { width: 29px; height: 29px; }

.share-item:hover .share-ico { transform: scale(1.28) translateY(-2px); }
.share-item:active .share-ico { transform: scale(1.05); }
.share-item:hover, .share-item:focus-visible { background: none; border-color: transparent; transform: none; }

.share-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translate(-50%, 8px);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gb-accent3);
  color: #04140b;
  font-family: var(--gb-font-head);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}
.share-toast.show { opacity: 1; transform: translate(-50%, 0); }

.share-btn.active { background: rgba(34,197,94,0.3); transform: rotate(90deg) scale(1.05); }

/* Borda superior animada verde */
.share-border {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  padding: 0;
  border-radius: 28px 28px 0 0;
  background: #22c55e;
  pointer-events: none;
}

.share-border::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 22px;
  border-radius: 0;
  display: none;
}

@media (max-width: 520px) { .share-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .share-ico svg { width: 26px; height: 26px; } }

/* ================================================
   ALERT DE CUPOM + CONFETE
   ================================================ */
.confetti-canvas { position: fixed; inset: 0; z-index: 11200; pointer-events: none; display: none; }
.confetti-canvas.on { display: block; }

.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,12,7,0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cp-overlay.show { opacity: 1; pointer-events: all; }

.cp-box {
  position: relative;
  width: min(360px, 100%);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: 22px 20px 20px;
  border-radius: 28px;
  background: var(--gb-bg-3);
  border: 1px solid var(--gb-border);
  text-align: center;
  transform: translateY(16px) scale(0.94);
  transition: transform 0.45s cubic-bezier(.22,1,.36,1);
}
.cp-overlay.show .cp-box { transform: none; }

.cp-close { position: absolute !important; top: 14px; right: 14px; }

.cp-title {
  font-family: var(--gb-font-head);
  font-size: clamp(16px, 4.2vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 2px 34px 4px;
}

.cp-sub {
  font-family: var(--gb-font-body);
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 400;
  color: var(--gb-muted);
  margin-bottom: 12px;
}

.cp-img {
  width: 80%;
  max-width: 260px;
  margin: 0 auto 14px;
  aspect-ratio: 1920 / 1080;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(134,239,172,0.05);
}
.cp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: clamp(42px, 5.4svh, 48px);
  margin: 0 auto;
  padding: 0 1em;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: #097e3e;
  font-family: var(--gb-font-head);
  font-weight: 700;
  font-size: clamp(16px, 4.2vw, 19px);
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s var(--gb-ease);
}

.cp-cta-icon { width: clamp(19px, 4.8vw, 22px); height: clamp(19px, 4.8vw, 22px); color: currentColor; }
.cp-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cp-cta:active { transform: scale(0.97); }
.cp-cta.copiado {
  background: #22c55e;
  border-color: #22c55e;
  color: #04140b;
}

.cp-hl {
  color: #22c55e;
  font-weight: 800;
}

.promo-btn { top: 72px; }
@media (max-width: 400px) { .promo-btn { top: 68px; } }

/* ================================================
   LIGHTBOX DO SLIDE
   ================================================ */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 11400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  padding-top: max(clamp(12px, 4vw, 40px), calc(env(safe-area-inset-top) + 60px));
  background: rgba(2,12,7,0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lb-overlay.show { opacity: 1; pointer-events: all; }

.lb-close { position: absolute !important; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; }

.lb-frame {
  width: 100%;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.lb-overlay.show .lb-frame { transform: none; }
.lb-frame img { max-width: 100%; max-height: calc(100svh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 20px; display: block; }
.slide img { cursor: zoom-in; }

/* ================================================
   BOTÃO GOOGLE + HORÁRIO
   ================================================ */
.google-btn { top: 126px; }
.google-btn svg { width: 20px; height: 20px; }
@media (max-width: 400px) { .google-btn { top: 118px; } }

.horario { display: none; }

.nb-logo-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.nb-horario {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  align-items: flex-end;
  text-align: right;
  flex: 0 0 auto;
  font-family: var(--gb-font-body);
}
.nb-horario-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gb-muted); }
.nb-horario-hora { font-size: 14px; font-weight: 600; color: var(--gb-text); white-space: nowrap; }

/* ================================================
   MENU — itens extras + ícones SVG
   ================================================ */
.nb-link-icon svg { width: 20px; height: 20px; color: var(--gb-accent4); }
.nb-panel.open .nb-item:nth-child(9)  { opacity:1; transform:none; transition-delay:.40s; }
.nb-panel.open .nb-item:nth-child(10) { opacity:1; transform:none; transition-delay:.44s; }
.nb-panel.open .nb-item:nth-child(11) { opacity:1; transform:none; transition-delay:.48s; }
.nb-panel.open .nb-item:nth-child(12) { opacity:1; transform:none; transition-delay:.52s; }

.nb-nav { max-height: calc(100svh - 260px); overflow-y: auto; scrollbar-width: thin; }

/* ================================================
   TÍTULO DO SLIDER — fonte bubble
   ================================================ */
.slider-title {
  /* flex pra encaixar as linhas onduladas dos dois lados */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 16px);
  margin: clamp(6px, 1.6svh, 16px) 0 clamp(2px, 0.6svh, 6px);
  font-family: var(--gb-font-bubble);
  font-size: clamp(18px, 5.4vw, 26px);
  font-weight: 400;
  letter-spacing: 0.6px;
  color: #eafff2;
  text-align: center;
  line-height: 1.2;
}

/* ================================================
   RESPONSIVIDADE GLOBAL + LAYOUT ÚNICO
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden !important; }

body {
  height: 100svh;
  min-height: 100svh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
}

body > header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  justify-content: center;
  height: 100svh;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: clamp(10px, 2.2svh, 24px);
  overflow: hidden;
}

.Logos, .Atualiza { margin: 0 !important; width: 100%; }

.Logos img {
  width: clamp(152px, 26svh, 280px) !important;
  height: auto !important;
  margin-top: 5% !important;
}

.Atualiza img {
  width: clamp(165px, 52vw, 250px) !important;
  height: auto !important;
  margin: 0 !important;
}

.container-btns {
  --gcb: clamp(6px, 1.2svh, 12px);
  position: static;
  transform: none;
  align-items: center;
  margin: 0 !important;
  gap: var(--gcb);
  width: 100%;
}

.Atualiza {
  margin-top: calc(var(--gcb) * -0.488) !important;
  margin-bottom: calc(var(--gcb) * -0.875) !important;
}

.button2 {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 !important;
  width: clamp(196px, 71.4vw, 255px) !important;
  max-width: 100%;
  height: clamp(46px, 6.8svh, 56px) !important;
  padding: 0 1.2em !important;
  font-size: clamp(20px, 5.4vw, 26px) !important;
  line-height: 1;
}

.button2 .text { display: inline-flex; align-items: center; line-height: 1; order: 1; }

.button2 img.icon {
  position: static !important;
  left: auto; top: auto;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 0;
  width: clamp(22px, 5.6vw, 28px) !important;
  height: clamp(22px, 5.6vw, 28px) !important;
  flex: 0 0 auto;
  object-fit: contain;
}

.slider {
  margin-top: 0 !important;
  width: min(686px, 100%, calc(30.36svh * 16 / 9)) !important;
  max-width: 100%;
  flex: 0 0 auto;
}

.slide { aspect-ratio: 1920 / 1080; height: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-dots { margin-top: clamp(6px, 1.2svh, 12px); }

/* Landscape baixo */
@media (orientation: landscape) and (max-height: 560px) {
  body > header { max-width: 760px; padding-top: 2.6svh; gap: 4px; }
  .slider-title { font-size: 15px; margin: 4px 0 2px; }
  .Logos img    { width: clamp(120px, 26svh, 200px) !important; }
  .Atualiza img { width: clamp(140px, 28vw, 200px) !important; }
  .button2      { height: 44px !important; font-size: 19px !important; }
  .slider       { width: min(528px, 100%, calc(25.08svh * 16 / 9)) !important; }
  .share-bubble { width: 100%; }
  .share-grid   { grid-template-columns: repeat(5, 1fr); }
}

/* Tablets */
@media (min-width: 700px) and (max-width: 1100px) {
  body > header { max-width: 739px; }
  .button2 { width: 289px !important; }
  .slider  { width: min(818px, 100%) !important; }
}

/* Desktop grande */
@media (min-width: 1400px) {
  body > header { max-width: 720px; }
  .Logos img { width: 300px !important; }
  .button2   { width: 289px !important; }
}

@media (max-width: 340px) {
  .button2 { width: 81.6vw !important; font-size: 18px !important; }
  .share-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .share-border, .share-border::before, .button2.whatsapp, .circle, .rocket {
    animation: none !important;
  }
}


/* =============================================
   FONTE CHANGO — botões e sidebar
   Precisa de !important porque o seletor global `*`
   (topo do arquivo) aplica Fredoka direto nos spans
   internos (.text / .nb-link-text), matando a herança.
   NÃO REMOVER.
   ============================================= */
.button2,
.button2 .text,
.button2 .text::before,
.button2 .text::after,
.nb-link,
.nb-link .nb-link-text {
  font-family: 'Chango', sans-serif !important;
  font-weight: 400 !important;
}


/* =============================================
   SIDEBAR LÍQUIDA — uma borda ondulada, sólida
   O fundo do painel é o SVG #nbLiquid: um único
   path de forma fixa, que entra deslizando.
   Sem oscilação e sem overshoot — só ida.
   ============================================= */

/* o fundo antigo do painel sai de cena */
.nb-panel-bg { display: none !important; }
.nb-panel    { background: transparent; overflow: hidden; }

/* painel e líquido na mesma curva, sem volta */
.nb-panel {
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}

.nb-liquid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8700;
  pointer-events: none;
  /* folga extra pra onda sumir por inteiro no mobile */
  transform: translateX(calc(-100% - 260px));
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.nb-liquid.on { transform: translateX(0); }

.lq-front { fill: #ffffff; }


/* =============================================
   ÍCONES BRANCOS — sidebar, flutuantes e share
   Os ícones dos botões brancos seguem verdes,
   senão sumiriam no fundo branco.
   ============================================= */
.nb-link-icon svg    { color: #097e3e; }
/* mesmo filtro calibrado dos botoes: chapa o PNG em #097e3e */
.nb-link-icon img    { filter: brightness(0) saturate(100%) invert(39%) sepia(28%) saturate(1045%) hue-rotate(94deg) brightness(95%) contrast(112%); }
.nb-search-icon      { color: #097e3e; }
.nb-close            { color: #ffffff; border: none; }
.nb-hamburger        { border: none; }
.nb-hamburger span   { background: #097e3e; }
.share-btn           { color: #097e3e; border: none; }
.google-btn svg path { fill: #097e3e; }
.share-ico           { color: #ffffff !important; }
.share-title-svg     { color: #ffffff; }
.share-close         { border: none; }


/* =============================================
   SIDEBAR BRANCA — conteudo em #097e3e
   O fundo e o proprio liquido (.lq-front).
   O #nbClose e mirado pelo id porque a classe
   .nb-close tambem serve ao lightbox, ao cupom
   e ao compartilhar, que seguem em fundo escuro.
   ============================================= */
.nb-logo-wrap     { border-bottom: 1px solid rgba(9,126,62,0.20); }
.nb-horario-label { color: rgba(9,126,62,0.65); }
.nb-horario-hora  { color: #097e3e; }

.nb-link          { color: #097e3e; }
.nb-link::before  { background: #097e3e; }
.nb-link:hover    { background: rgba(9,126,62,0.10); color: #097e3e; }

#nbClose          { color: #097e3e; background: transparent; }
#nbClose:hover    { background: #097e3e; color: #ffffff; }

.nb-search-input               { background: #ffffff; border: 1.5px solid rgba(9,126,62,0.35); color: #097e3e; }
.nb-search-input::placeholder  { color: rgba(9,126,62,0.50); }
.nb-search-input:focus         { background: #ffffff; border-color: #097e3e; }

.nb-search-results             { background: #ffffff; border: 1px solid rgba(9,126,62,0.25); }
.nb-result-item                { color: #097e3e; border-bottom: 1px solid rgba(9,126,62,0.15); }
.nb-result-item:hover,
.nb-result-item.focused        { background: rgba(9,126,62,0.08); }
.nb-result-label strong        { color: #097e3e; }
.nb-no-results                 { color: rgba(9,126,62,0.60); }


/* =============================================
   LOGO DA SIDEBAR — nao pode estourar o painel
   A Greenb.png e 637x268 (2.38:1). Travada em
   88px de altura ela da 209px de largura, mais
   que o .nb-logo-wrap no mobile (137-235px):
   empurrava o horario pra fora da tela com o
   menu fechado. Agora ela encolhe junto.
   ============================================= */
/* wrap: se nao couber lado a lado, o horario desce de linha
   em vez de espremer o logo ate virar um selo ilegivel */
.nb-logo-wrap {
  overflow: hidden;
  flex-wrap: wrap;
  row-gap: 10px;
}

.nb-logo {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  overflow: hidden;
}

.nb-logo-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}

.nb-horario { flex: 0 0 auto; min-width: 0; }


/* =============================================
   BOTAO DO GOOGLE — expande pra baixo
   Ancorado no topo (justify-content: flex-start):
   os 44x44 de cima ficam identicos ao botao fechado
   e o G nunca sai do lugar quando o botao cresce.
   Centralizar aqui empurrava o icone pra fora do
   circulo, porque o conteudo e mais alto que 44px.
   border-radius 22px = o mesmo circulo quando fechado.
   ============================================= */
.google-btn {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* (44 - 20) / 2 = 12  ->  G centrado nos 44px do topo */
.google-btn > svg {
  flex: 0 0 auto;
  margin-top: 12px;
}

.google-btn.abrindo {
  /* 12 + 20 (G) + 12 + 5x20 + 4x2 (gaps) + 12 de folga */
  height: 164px;
}

.google-btn .gb-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.google-btn.abrindo .gb-stars {
  opacity: 1;
  transform: none;
  transition-delay: 0.14s;
}

/* estrelas no mesmo tamanho do icone */
.google-btn .gb-stars svg {
  width: 20px;
  height: 20px;
  display: block;
}

.google-btn .gb-stars svg path {
  fill: #f6b100;
}


/* =============================================
   LINHAS ONDULADAS AO LADO DO TITULO
   SVG embutido como data URI, repetido no eixo X.
   ============================================= */
.slider-title::before,
.slider-title::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(30px, 10vw, 62px);
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q 5 0.6 10 5 T 20 5 T 30 5 T 40 5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / auto 100%;
}


/* =============================================
   ONDAS DO RODAPE — 3 camadas solidas
   Mesmo principio da sidebar: a borda de cada
   camada e a soma de senoides de fase fixa,
   desenhada em JS pra nao distorcer conforme a
   largura da tela. Ocupa os 20% de baixo.
   ============================================= */
.gb-waves {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20svh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

.gw-1 { fill: #2f8f5e; }   /* camada do fundo, mais alta */
.gw-2 { fill: #1c8450; }   /* camada do meio */
.gw-3 { fill: #097e3e; }   /* camada da frente */


/* =============================================
   CARDAPIO — tela sobreposta em duas etapas
   Etapa 1: 4 quadrados ocupando a tela inteira.
   Etapa 2: os cards da secao escolhida.
   Tudo solido, sem sombra e sem degrade.
   ============================================= */
.cd-tela {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-tela.aberto {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ── Etapa 1: a grade ── */
.cd-grade {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  /* o topo (voltar + titulo) passa a ter faixa branca propria,
     senao o titulo verde cairia em cima da foto do quadro */
  padding: 68px 20px 20px;
  min-height: 0;
}

.cd-tela.nos-produtos .cd-grade { display: none; }

.cd-quadro {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 10px;
  /* nome ancorado no canto inferior esquerdo do quadro */
  padding: clamp(10px, 3vw, 16px);
  cursor: pointer;
  background: #097e3e;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.cd-quadro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* camada chapada pra garantir leitura do nome sobre a foto */
.cd-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 126, 62, 0.26);
}

.cd-quadro-nome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
  font-family: 'Chango', sans-serif;
  font-size: clamp(15px, 4.4vw, 26px);
  color: #ffffff;
  letter-spacing: 0.4px;
  text-align: left;
  line-height: 1.1;
}

/* seta do grupo: em em, entao acompanha a fonte em qualquer tela */
.cd-seta-grupo {
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  opacity: 0.85;
}

.cd-quadro:active { transform: scale(0.985); }

/* a fileira de baixo so desvia da sacola, que agora
   fica no canto inferior DIREITO */
.cd-quadro:nth-child(4) {
  padding-right: clamp(78px, 20vw, 96px);
}

/* ── Etapa 2: os produtos ── */
.cd-produtos {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 128px clamp(12px, 4vw, 28px) 110px;
  min-height: 0;
}

.cd-tela.nos-produtos .cd-produtos { display: block; }

.cd-lista {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(10px, 3vw, 18px);
  max-width: 900px;
  margin: 0 auto;
}

.cd-lista.ativa { display: grid; }

.cd-card {
  position: relative;
  background: #f2f9f5;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cd-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #dff3e6;
}

.cd-card-info {
  /* folga a direita pro botao + nao encostar no texto */
  padding: 9px 42px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cd-card-info h3 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(11.5px, 3.1vw, 14px);
  color: #097e3e;
  line-height: 1.2;
  min-width: 0;
}

/* seta de "ver detalhes" na linha do nome */
.cd-seta {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  color: rgba(9,126,62,0.55);
}

.cd-preco {
  font-family: var(--gb-font-body);
  font-size: clamp(10.5px, 2.9vw, 12.5px);
  color: rgba(9,126,62,0.75);
}

/* ── Voltar ── */
.cd-voltar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: #6cf57c;
  color: #097e3e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-voltar svg { width: 22px; height: 22px; }

/* ── Titulo no rodape, a 5px das bordas ── */
.cd-titulo {
  margin: 0;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4.6vw, 24px);
  color: #ffffff;
  letter-spacing: 0.3px;
  pointer-events: none;
}


/* =============================================
   CARDAPIO — topo, filtros, sacola
   ============================================= */
.cd-topo {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cd-titulo {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 26px);
  color: #097e3e;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* ── Filtros ── */
.cd-filtros {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 clamp(12px, 4vw, 28px);
}

.cd-tela:not(.nos-produtos) .cd-filtros { display: none; }

.cd-filtro {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: #eaf7ef;
  color: #097e3e;
  font-family: var(--gb-font-body);
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cd-filtro.ativo {
  background: #097e3e;
  color: #ffffff;
}

/* ── Botao + no card ── */
.cd-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 16px;
  background: #6cf57c;
  color: #097e3e;
  font-family: var(--gb-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}

.cd-add:active { transform: scale(0.9); }

/* ── Botao da sacola (canto inferior esquerdo) ── */
.cd-sacola-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 7;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 27px;
  background: #6cf57c;
  color: #097e3e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-sacola-btn svg { width: 26px; height: 26px; }

.cd-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: #097e3e;
  color: #ffffff;
  font-family: var(--gb-font-body);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-sacola-btn[data-vazia="sim"] .cd-badge { display: none; }

/* ── Painel da sacola ── */
.cd-sacola {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(4,40,20,0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.cd-sacola.aberta { opacity: 1; pointer-events: auto; }

.cd-sacola-box {
  width: 100%;
  max-height: 82%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 18px clamp(14px, 4vw, 26px) max(16px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-sacola.aberta .cd-sacola-box { transform: none; }

.cd-sacola-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex: 0 0 auto;
}

.cd-sacola-topo h3 {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 20px);
  color: #097e3e;
}

.cd-sacola-fechar {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #eaf7ef;
  color: #097e3e;
  font-size: 15px;
  cursor: pointer;
}

.cd-sacola-vazia {
  font-family: var(--gb-font-body);
  font-size: 14px;
  color: rgba(9,126,62,0.7);
  padding: 18px 0 22px;
  text-align: center;
}

.cd-sacola-itens {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.cd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(9,126,62,0.12);
}

.cd-item > img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  background: #dff3e6;
  flex: 0 0 auto;
}

.cd-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-item-nome {
  font-family: 'Chango', sans-serif;
  font-size: 14px;
  color: #097e3e;
  line-height: 1.2;
}

.cd-item-preco {
  font-family: var(--gb-font-body);
  font-size: 13px;
  color: rgba(9,126,62,0.75);
}

.cd-qtd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-qtd button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 14px;
  background: #eaf7ef;
  color: #097e3e;
  font-family: var(--gb-font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cd-qtd span {
  min-width: 18px;
  text-align: center;
  font-family: var(--gb-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #097e3e;
}

.cd-sacola-rodape {
  flex: 0 0 auto;
  padding-top: 14px;
}

.cd-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--gb-font-body);
  font-size: 15px;
  color: rgba(9,126,62,0.75);
}

.cd-total strong {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 22px);
  color: #097e3e;
}

.cd-fechar-pedido {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: 'Chango', sans-serif;
  font-size: clamp(16px, 4.4vw, 19px);
  cursor: pointer;
  transition: transform 0.18s ease;
}

.cd-fechar-pedido:disabled { opacity: 0.45; cursor: not-allowed; }
.cd-fechar-pedido:active:not(:disabled) { transform: scale(0.98); }


/* =============================================
   CARDAPIO — detalhes do produto e extras
   ============================================= */
.cd-fechar-pedido svg { width: 20px; height: 20px; flex: 0 0 auto; }

.cd-card { cursor: pointer; }

/* ── Extras da sacola ── */
.cd-extras {
  flex: 0 0 auto;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(9,126,62,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--gb-font-body);
  font-size: 14px;
  color: #097e3e;
}

.cd-extra em { font-style: normal; color: rgba(9,126,62,0.55); font-size: 12px; }

.cd-qtd button:disabled { opacity: 0.35; cursor: not-allowed; }

.cd-obs { display: flex; flex-direction: column; gap: 8px; }

.cd-obs-tit {
  font-family: var(--gb-font-body);
  font-size: 14px;
  color: #097e3e;
}

.cd-obs-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cd-chip {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  background: #eaf7ef;
  color: #097e3e;
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cd-chip.ativo { background: #097e3e; color: #ffffff; }

#cdObs {
  width: 100%;
  border: 1.5px solid rgba(9,126,62,0.25);
  border-radius: 14px;
  padding: 9px 12px;
  font-family: var(--gb-font-body);
  font-size: 13.5px;
  color: #097e3e;
  resize: none;
  outline: none;
  background: #ffffff;
}

#cdObs::placeholder { color: rgba(9,126,62,0.45); }
#cdObs:focus { border-color: #097e3e; }

/* ── Detalhes do produto: foto em cima, dados abaixo ── */
.cd-det {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(4,40,20,0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.cd-det.aberto { opacity: 1; pointer-events: auto; }

.cd-det-box {
  position: relative;
  width: 100%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-det.aberto .cd-det-box { transform: none; }

.cd-det-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #ffffff;
  color: #097e3e;
  font-size: 15px;
  cursor: pointer;
}

.cd-det-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: #dff3e6;
  flex: 0 0 auto;
}

.cd-det-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 16px clamp(14px, 4vw, 26px) 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-det-corpo h3 {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 22px);
  color: #097e3e;
  line-height: 1.2;
}

.cd-det-preco {
  font-family: var(--gb-font-body);
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 600;
  color: #097e3e;
  margin-top: -6px;
}

.cd-det-desc {
  font-family: var(--gb-font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(9,126,62,0.8);
}

.cd-det-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(9,126,62,0.12);
  font-family: var(--gb-font-body);
  font-size: 13.5px;
  color: rgba(9,126,62,0.65);
}

.cd-det-linha strong {
  font-weight: 600;
  color: #097e3e;
  text-align: right;
}

.cd-det-qtd { padding-bottom: 4px; }

.cd-det-add {
  flex: 0 0 auto;
  margin: 0 clamp(14px, 4vw, 26px) max(16px, env(safe-area-inset-bottom));
  height: 52px;
  border: none;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: 'Chango', sans-serif;
  font-size: clamp(15px, 4.2vw, 18px);
  cursor: pointer;
}

.cd-det-add:active { transform: scale(0.98); }


/* =============================================
   CARDAPIO — sabor adicional + detalhes responsivos
   ============================================= */

/* ── "+" e "-" maiores dentro dos detalhes ── */
.cd-det .cd-qtd { gap: 12px; }

.cd-det .cd-qtd button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 23px;
}

.cd-det .cd-qtd span {
  min-width: 26px;
  font-size: 16px;
}

/* ── Detalhes: responsivo ── */
@media (min-width: 700px) {
  /* em tela larga vira caixa centrada, nao folha colada embaixo */
  .cd-det {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .cd-det-box {
    max-width: 470px;
    max-height: 88%;
    border-radius: 28px;
  }
  .cd-det-foto { aspect-ratio: 16 / 9; }
}

@media (orientation: landscape) and (max-height: 560px) {
  /* deitado e baixo: a foto encolhe pra sobrar leitura */
  .cd-det-box { max-height: 96%; }
  .cd-det-foto { aspect-ratio: 24 / 7; }
  .cd-det-corpo { padding-top: 12px; gap: 7px; }
  .cd-det-add { height: 46px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  .cd-det-foto { aspect-ratio: 16 / 8; }
}

/* ── Modal do sabor adicional ── */
.cd-sabor {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(4,40,20,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cd-sabor.aberto { opacity: 1; pointer-events: auto; }

.cd-sabor-box {
  width: 100%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 18px clamp(14px, 4vw, 26px) max(16px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-sabor.aberto .cd-sabor-box { transform: none; }

.cd-sabor-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cd-sabor-topo h3 {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 20px);
  color: #097e3e;
}

.cd-sabor-fechar {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #eaf7ef;
  color: #097e3e;
  font-size: 15px;
  cursor: pointer;
}

.cd-sabor-ops {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.cd-op {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 16px;
  background: #f2f9f5;
  color: #097e3e;
  font-family: var(--gb-font-body);
  font-size: clamp(13px, 3.6vw, 15px);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}

.cd-op-marca {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 10px;
  border: 2px solid rgba(9,126,62,0.35);
  position: relative;
}

.cd-op.ativo { background: #eaf7ef; }
.cd-op.ativo .cd-op-marca { border-color: #097e3e; }

.cd-op.ativo .cd-op-marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background: #097e3e;
}

.cd-sabor-ok {
  flex: 0 0 auto;
  height: 52px;
  border: none;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: 'Chango', sans-serif;
  font-size: clamp(15px, 4.2vw, 18px);
  cursor: pointer;
}

.cd-sabor-ok:disabled { opacity: 0.4; cursor: not-allowed; }

@media (min-width: 700px) {
  .cd-sabor { align-items: center; padding: 24px; }
  .cd-sabor-box { max-width: 430px; border-radius: 28px; }
}


/* =============================================
   MODAL DE OPCOES — multiescolha e remover acucar
   ============================================= */
.cd-sabor-dica {
  flex: 0 0 auto;
  margin: -6px 0 10px;
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  color: rgba(9,126,62,0.6);
}

.cd-sabor-dica:empty { display: none; }

.cd-op:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* marca quadrada = multiescolha / acucar; redonda = escolha unica */
.cd-op-acucar {
  margin-top: 6px;
  border-top: 1px solid rgba(9,126,62,0.12);
  border-radius: 0 0 16px 16px;
  padding-top: 16px;
}

.cd-op-acucar .cd-op-marca { border-radius: 6px; }
.cd-op-acucar.ativo .cd-op-marca::after { border-radius: 3px; }


/* =============================================
   CARDAPIO — preco do adicional e pedido enviado
   ============================================= */
.cd-op-preco {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(9,126,62,0.7);
}

.cd-op.ativo .cd-op-preco { color: #097e3e; }

.cd-enviado {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4,40,20,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cd-enviado.aberto { opacity: 1; }

.cd-enviado-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  padding: 26px 24px;
  border-radius: 24px;
  background: #ffffff;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-enviado.aberto .cd-enviado-box { transform: none; }

.cd-enviado-box svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 20px;
  background: #6cf57c;
  color: #097e3e;
}

.cd-enviado-box strong {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #097e3e;
}

.cd-enviado-box span {
  font-family: var(--gb-font-body);
  font-size: 13px;
  color: rgba(9,126,62,0.7);
}


/* =============================================
   ELEMENTOS FLUTUANDO NO FUNDO
   5 SVGs brancos de contorno atravessando a tela.
   Posicao, tamanho, duracao e giro sao sorteados
   em JS a cada volta — nada se repete igual.
   Ficam atras das ondas do rodape (z-index -2).
   ============================================= */
.gb-flut {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.gb-flut-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tam, 64px);
  height: var(--tam, 64px);
  opacity: 0;
  will-change: transform, opacity;
  animation: gbFlutua var(--dur, 24s) linear var(--atraso, 0s) infinite;
}

.gb-flut-item svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes gbFlutua {
  0%   { transform: translate(var(--x0, 0px), 112svh) rotate(0deg);              opacity: 0; }
  12%  { opacity: var(--op, 0.28); }
  88%  { opacity: var(--op, 0.28); }
  100% { transform: translate(var(--x1, 0px), -26svh) rotate(var(--giro, 180deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) { .gb-flut { display: none; } }


/* =============================================
   COMPARTILHAR — mesmo liquido da sidebar
   Em vez de entrar pela esquerda, a borda solida
   sobe pelo rodape. Fundo branco, elementos
   #097e3e — o mesmo padrao do menu lateral.
   ============================================= */
.sh-liquid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10550;
  pointer-events: none;
  transform: translateY(calc(100% + 260px));
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sh-liquid.on { transform: translateY(0); }

.shq-front { fill: #ffffff; }

/* o liquido virou o fundo: a folha em si fica transparente */
.share-bubble {
  background: transparent;
  border-radius: 0;
  padding-top: 18px;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
              opacity 0.35s ease;
}

/* backdrop mais leve pro liquido aparecer, igual a sidebar */
.share-backdrop { background: rgba(2,12,7,0.22); }

.share-head-title { color: #097e3e; }
.share-title-svg  { color: #097e3e; }
.share-ico        { color: #097e3e !important; }

.share-item {
  border-radius: 999px;
  color: #097e3e;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
}
.share-item:hover,
.share-item:focus-visible { background: rgba(9,126,62,0.10); }

.share-toast {
  background: #097e3e;
  color: #ffffff;
  border: none;
}

/* a barrinha verde do topo da folha sobra agora que
   quem faz a borda e a onda do liquido */
.share-border { display: none; }

/* fechar do compartilhar: circulo verde solido
   (o branco sumia agora que o fundo virou branco) */
.share-close {
  background: #097e3e;
  border: none;
  color: #ffffff;
}
.share-close:hover { background: #0b9a4c; color: #ffffff; }


/* =============================================
   CUPOM — splash de liquido
   O fundo do alert e um respingo solido desenhado
   em JS (mesma ideia das ondas: forma fixa, sem
   degrade). O conteudo fica por cima, centrado.
   ============================================= */
.cp-overlay { padding: 12px; }

.cp-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(420px, calc(100vw - 8px), 82svh);
  aspect-ratio: 1 / 1;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  transform: translateY(18px) scale(0.86);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* o respingo transborda um pouco a caixa: as gotas
   soltas precisam de espaco fora do corpo */
.cp-splash {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  display: block;
}
.cp-splash-corpo,
.cp-splash-gotas circle { fill: #097e3e; }

.cp-conteudo {
  position: relative;
  z-index: 2;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.cp-title {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 4vw, 19px);
  line-height: 1.28;
  color: #ffffff;
  margin: 0;
}

.cp-hl { color: #6cf57c; font-weight: 400; }

.cp-sub {
  font-family: var(--gb-font-body);
  font-size: clamp(11px, 3.1vw, 13.5px);
  color: rgba(255,255,255,0.88);
  margin: 0;
}

.cp-cta {
  width: auto;
  margin-top: 4px;
  padding: 0 18px;
  height: clamp(38px, 5svh, 46px);
  gap: 9px;
  background: #ffffff;
  color: #097e3e;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 3.4vw, 15px);
}
.cp-cta-text { white-space: nowrap; }
.cp-cta-icon { width: clamp(15px, 3.8vw, 18px); height: clamp(15px, 3.8vw, 18px); }
.cp-cta:hover { transform: translateY(-2px); filter: none; }
.cp-cta.copiado { background: #6cf57c; color: #097e3e; }

/* o botao "estoura" junto com o confete */
.cp-cta.estourou { animation: cpEstoura 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cpEstoura {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  65%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* fechar dentro do respingo, no topo — no canto ele
   batia no texto nas telas estreitas */
.cp-close {
  position: absolute !important;
  top: 11% !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: #ffffff;
  color: #097e3e;
}
.cp-close:hover { background: #6cf57c; color: #097e3e; transform: translateX(-50%) rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .cp-cta.estourou { animation: none; }
}


/* =============================================
   BOTÃO DE PAGAMENTO — abaixo do hamburguer
   ============================================= */
.gb-pay-btn {
  position: fixed;
  top: 76px;   /* logo abaixo do hamburguer (20 + 46 + 10) */
  left: 20px;
  z-index: 8000;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6cf57c;
  border: none;
  border-radius: 16px;
  color: #097e3e;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.gb-pay-btn:hover { background: #4ade80; transform: translateY(-1px); }
.gb-pay-btn:active { transform: scale(0.94); }
.gb-pay-btn svg { width: 24px; height: 24px; }
/* some junto com o hamburguer quando a sidebar abre */
body.nb-open .gb-pay-btn { opacity: 0; pointer-events: none; transform: scale(0.8); }


/* =============================================
   CARDAPIO — selos de ranking + quantidade no card
   ============================================= */
.cd-card-media {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* Ranking (canto superior esquerdo) */
.cd-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 5px;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.cd-rank svg { width: 14px; height: 14px; }
.cd-rank em {
  font-family: 'Chango', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2px;
}
.cd-rank-1 { background: #d4a017; }   /* ouro   */
.cd-rank-2 { background: #8a9298; }   /* prata  */
.cd-rank-3 { background: #b06b2e; }   /* bronze */

/* Quantidade / recipiente (canto inferior esquerdo) */
.cd-qtd-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: var(--gb-font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/* =============================================
   SACOLA — botão "Remover tudo"
   ============================================= */
.cd-limpar {
  width: 100%;
  height: 44px;
  display: none;               /* JS mostra quando há itens */
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  border: none;
  border-radius: 999px;
  background: #06210f;
  color: #86efac;
  font-family: var(--gb-font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s;
}
.cd-limpar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cd-limpar:hover { background: #7a1f1f; color: #ffd9d9; }
.cd-limpar:active { transform: scale(0.98); }


/* =============================================
   GATE DE PAGAMENTO — backend do links.html com
   design Green Burbble (fundos sólidos, verde).
   Tudo escopado em .pay-gate.
   ============================================= */
.pay-gate {
  --bg:#065f2c; --hl:#a3ff5e; --surface:#06622e; --text:#ffffff;
  --muted:#d7f5e3; --border:#1a9a52; --shadow:0 20px 60px rgba(0,0,0,.28);
  position: fixed; inset: 0; z-index: 12000;
  overflow-y: auto; overscroll-behavior: contain;
  background: #097e3e; color: var(--text);
  font-family: var(--gb-font-body);
  color-scheme: dark;
}
.pay-gate .pay-bg { position: absolute; inset: 0; z-index: 0; }
.pay-gate[hidden] { display: none; }
.pay-gate * { box-sizing: border-box; }
.pay-gate svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pay-gate button, .pay-gate input, .pay-gate a, .pay-gate textarea { font: inherit; -webkit-tap-highlight-color: transparent; }
.pay-gate button { cursor: pointer; color: inherit; }
.pay-gate a { color: inherit; text-decoration: none; }

.pay-gate .pay-wrap { position: relative; z-index: 1; width: min(100% - 40px, 480px); margin: 24px auto 40px; }
.pay-gate .payment-page { padding: 12px 0 24px; }

.pay-gate .payment-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 24px; }
.pay-gate .payment-back {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  border: none; border-radius: 14px; background: #6cf57c; color: #097e3e;
  box-shadow: var(--shadow); transition: transform .22s, background .22s;
}
.pay-gate .payment-back svg { width: 24px; height: 24px; stroke-width: 2; }
.pay-gate .payment-back:is(:hover, :focus-visible) { transform: translateX(-3px); background: #4ade80; }
.pay-gate .payment-head h1 { display: flex; align-items: center; gap: 10px; font-family: 'Chango', sans-serif; font-weight: 400; font-size: 24px; margin: 0; color: var(--text); }
.pay-gate .payment-head h1 svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--text); }

.pay-gate .payment-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.pay-gate .payment-options > p { grid-column: 1 / -1; margin: 0 0 4px; color: var(--text); font-size: clamp(20px, 5vw, 24px); font-weight: 700; line-height: 1.35; text-align: center; }
.pay-gate .payment-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  gap: 8px; min-height: 152px; padding: 14px 10px 16px;
  border: 1px solid transparent; border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow); transition: transform .22s, border-color .22s;
}
.pay-gate a.payment-choice:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: #097e3e; }
.pay-gate .payment-choice-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; overflow: visible; background: transparent; }
.pay-gate .payment-choice-icon img { width: auto; max-width: 100%; height: auto; max-height: clamp(82px, 21vw, 108px); object-fit: contain; display: block; }
.pay-gate .payment-choice strong { display: block; white-space: nowrap; font-size: clamp(10px, 3vw, 15px); line-height: 1.15; color: #097e3e; }
.pay-gate .payment-choice small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: rgba(9,126,62,0.7); }
.pay-gate .payment-choice-unavailable { opacity: .6; }
.pay-gate .pay-arrow { display: none; }

.pay-gate .payment-card { padding: 24px; border-radius: 24px; background: #ffffff; border: 1px solid transparent; box-shadow: var(--shadow); }
.pay-gate .payment-card[hidden] { display: none; }
.pay-gate .payment-card h2 { margin: 0 0 12px; font-family: 'Chango', sans-serif; font-weight: 400; font-size: 22px; color: #097e3e; }
.pay-gate .payment-card p { font-size: 14px; line-height: 1.6; color: rgba(9,126,62,0.72); }
.pay-gate .payment-card label { display: block; margin-top: 24px; font-size: 12px; font-weight: 700; color: #097e3e; }
.pay-gate .pix-recipient { text-align: center; color: #097e3e; }
.pay-gate .pix-qr { display: block; width: min(100%, 264px); height: auto; margin: 20px auto; background: #fff; border-radius: 12px; }
.pay-gate #payPixCode { width: 100%; display: block; resize: vertical; min-height: 76px; margin: 8px 0 14px; padding: 12px; border: 1px solid #cdeede; border-radius: 12px; background: #f2f9f5; color: #0a3d22; font: 12px/1.5 monospace; overflow-wrap: anywhere; }
.pay-gate #payPixKey { display: block; width: 100%; min-width: 0; padding: 16px 12px; margin: 8px 0 14px; border: 3px double #097e3e; border-radius: 12px; background: #f2f9f5; color: #0a3d22; text-align: center; font: 700 22px monospace; }
.pay-gate #payPixStatus { min-height: 22px; color: rgba(9,126,62,0.72); font-size: 14px; }
.pay-gate .payment-note { border-top: 1px solid #d8efe1; padding-top: 16px; }

.pay-gate .link-card {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; border: none; border-radius: 12px;
  background: #097e3e; box-shadow: var(--shadow);
  transition: transform .22s, background-color .22s, color .22s;
}
.pay-gate .coupon-copy { width: 100%; height: 50px; justify-content: center; cursor: pointer; color: #ffffff; }
.pay-gate .coupon-copy strong { font-size: 14px; }
.pay-gate .coupon-copy:is(:hover, :focus-visible) { transform: translateY(-3px); background: #0a9a4b; color: #ffffff; }
.pay-gate .coupon-copy:active { transform: scale(.98); }

@media (max-width: 359px) {
  .pay-gate .payment-card { padding: 18px; }
  .pay-gate .payment-choice { padding: 16px; gap: 10px; }
  .pay-gate .payment-choice strong { font-size: 15px; }
}

.pay-gate .pay-toast {
  position: fixed; z-index: 20; bottom: 20px; left: 50%; transform: translate(-50%, 10px);
  width: max-content; max-width: calc(100% - 32px); border-radius: 16px;
  background: #6cf57c; color: #04140b; padding: 14px 20px;
  font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transition: .2s;
}
.pay-gate .pay-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.pay-gate [hidden] { display: none !important; }
.pay-gate #pay-title:focus, .pay-gate #pay-title:focus-visible { outline: none; }